<template>
  <div class="form-page">
    <Card :bordered="false" :dis-hover="true">
      <p slot="title" style="color: #666">
        <span
          class="iconfont icon-changyongtubiao-xianxingdaochu-zhuanqu-"
          style="font-size: 20px"
        ></span>
        新增设备
      </p>
      <p slot="extra" style="color: #999; font-size: 12px">
        <label style="color: #ff3b30">*</label> 为必填
      </p>

      <Form
        :model="bloc.model"
        label-position="right"
        :label-width="100"
        :rules="ruleValidate"
        ref="formValidateAdd"
        required
      >
        <!--        <FormItem label="所属品牌商:" v-model="bloc.company.id" style="text-align: left">-->
        <!--          <span>{{bloc.company.name}}</span>-->
        <!--          &lt;!&ndash;            <CompanySeletorSingle :companyId="bloc.model.companyId" style=" margin-right:5px"&ndash;&gt;-->
        <!--          &lt;!&ndash;                                  @on-change="handleChangeCompany"&ndash;&gt;-->
        <!--          &lt;!&ndash;                                  v-if="Validation.isRootCompany"></CompanySeletorSingle>&ndash;&gt;-->
        <!--        </FormItem>-->

        <FormItem
          label="设备分类:"
          prop="sortId"
          style="text-align: left"
          required
        >
          <span>
            <!--            {{bloc.sort.sortName}}-->
          </span>
          <Select
            v-model="bloc.model.sortId"
            @on-change="handleChange(bloc.model.sortId)"
            style="width: 400px; height: 40px"
          >
            <Option
              v-for="(item, index) in bloc.sortList"
              :value="item.id"
              :key="index"
              >{{ item.sortName }}
            </Option>
          </Select>
        </FormItem>

        <FormItem
          label="设备型号:"
          prop="modelId"
          style="text-align: left"
          required
        >
          <!--            <span>-->
          <!--           {{ bloc.model.modelName }}-->
          <!--             </span>-->
          <Select
            v-model="bloc.model.modelId"
            style="width: 400px; height: 40px"
          >
            <Option
              v-for="item in bloc.modelList"
              :value="item.id"
              :key="item.id"
              >{{ item.modelName }}
            </Option>
          </Select>
        </FormItem>

        <FormItem label="设备ID:" prop="deviceSn" required>
          <Input
            v-model="bloc.model.deviceSn"
            style="width: 400px; height: 40px"
          ></Input>
        </FormItem>
      </Form>
      <div style="margin: 20px 0px 35px 25px">
        <Button style="width: 100px; height: 40px" @click="handleCancel()"
          >返回</Button
        >
        <Button
          style="margin-left: 30px; width: 100px; height: 40px"
          type="primary"
          :loading="btnload.loading"
          @click="handleSubmit('formValidateAdd')"
          >保存
        </Button>
      </div>
    </Card>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { Route } from "vue-router";
import { DevicesBloc } from "./DevicesBloc";
import CompanySeletorSingle from "@/component/CompanySeletorSingle.vue";
import { Loading } from "@/base/Loading";

@Component({
  components: { CompanySeletorSingle },
})
export default class extends Vue {
  disabled: boolean = true;

  beforeRouteEnter(to: Route, from: Route, next: (vm: any) => void) {
    next((vm) => {
      vm.bloc.getAllSort(1, 1000, "ASC");
    });
  }

  bloc = new DevicesBloc();
  btnload = new Loading();
  $refs!: {
    formValidateAdd: HTMLFormElement;
  };
  ruleValidate: any = {
    // agentId: [
    //   {required: true, message: '经销商不能为空', trigger: 'change', type: 'number'}
    // ],
    modelId: [
      {
        required: true,
        message: "设备型号不能为空",
        trigger: "change",
        type: "number",
      },
    ],
    sortId: [
      {
        required: true,
        message: "设备分类不能为空",
        trigger: "change",
        type: "number",
      },
    ],
    // area: [
    //   {required: true, message: '地区不能为空', trigger: 'change'}
    // ],
    deviceSn: [{ required: true, message: "设备ID不能为空", trigger: "blur" }],
  };

  handleChange(sortId) {
    this.bloc
      .getAllModel(this.bloc.angent.pageIndex, 1000, sortId, "DESC", undefined)
      .then((res) => {})
      .finally(() => {
        this.bloc.getAllSort(this.bloc.angent.pageIndex, 1000, "ASC");
      });
  }

  handleCancel() {
    this.$router.push({ path: "/device-manage/devices" });
  }

  // 添加设备
  handleSubmit(name) {
    this.$refs[name].validate((valid) => {
      if (valid) {
        this.bloc
          .addDevice(
            this.bloc.model.deviceSn,
            this.bloc.model.modelId,
            this.bloc.model.sortId
          )
          .then((res) => {
            this.$Message.success("添加设备成功!");
            this.$router.push({ path: "/device-manage/devices" });
          })
          .catch((err) => {
            this.$Message.error(err.message);
          });
      }
    });
  }
}
</script>

<style lang="less" scoped>
/deep/ .ivu-form-item-content {
  display: flex !important;
  justify-content: start !important;
  align-items: center !important;
}
</style>
